/* eslint-disable jsx-a11y/alt-text */
import React from 'react'
import { withRouter } from "react-router-dom"
import "../assets/css/relist/header.css"
import Return from "../public/Return"
//歌单列表的头部
class ListHead extends React.Component {
    constructor(props) {
        super(props)
        // console.log("测试",props)
        props.getReList(this.props.location.search.replace("?id=", ""))


    }
    componentWillMount() {
        this.props.getReList(this.props.location.search.replace("?id=", ""))
    }

    render() {
        const { coverImgUrl, name, creator } = this.props.reList
        let ele = null;

        try {

            let userImg = creator.avatarUrl || "";
            let nickname = creator.nickname || "";
            this.props.setReturnMsg(name)

            ele = <div>
                <div className="zsj"><Return {...this.props} /></div>
                <div className="headerbox">
                    <div>
                        <div style={{ display: "flex", position: "absolute", zIndex: "1" }}  >
                            <div><img src={coverImgUrl} alt="" className="img" /></div>
                            <div className="all">
                                <h2 className="username">{name}</h2>
                                <div style={{ display: "flex" }}>
                                    <img src={userImg} alt="" className="userheader" />
                                    <span className="nickname">{nickname}</span>
                                </div>
                            </div>
                        </div>
                        <div style={{ backgroundImage: `url(${coverImgUrl})`, backgroundSize: "cover" }}
                            className="blurbox bg-blur">

                        </div>
                    </div>
                </div>
            </div>

        } catch (e) { }

        return (
            ele
        )
    }
}

export default withRouter(ListHead);